<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .mycolor {
            color: red;
        }
    </style>
</head>

<body>

    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3" class="mycolor">
    </div>
    <div id="div4">
        <p id="p1">p1</p>
    </div>
    <span id="span1"></span>
    <ul>
        <li>无敌爆爆龙1号</li>
        <li>无敌爆爆龙2号</li>
        <li>无敌爆爆龙3号</li>
    </ul>

    <script>
        let div1 = document.getElementById("div1")
        console.log(div1)
        div1.innerHTML = "<p>无敌爆爆龙4号</p>"
        div1.title = "无敌爆爆龙4号"
        div1.style.color = "red"

        let myEle = document.createElement("h1")
        myEle.innerText = "无敌爆爆龙5号"
        let myEle1 = document.createElement("div")
        myEle1.innerText = "无敌爆爆龙6号"
        div1.append("无敌爆爆龙7号")

        let div2 = document.querySelector("#div2")
        console.log(div2)
        let div3 = document.querySelector(".mycolor")
        console.log(div3)
        let div4 = document.getElementsByTagName("div")
        console.log(div4)

        let p1 = document.getElementById("p1")
        let myEle2 = document.createElement("h3")
        myEle2.innerHTML = "无敌爆爆龙8号"
            // div1.insertBefore(myEle2, p1)
        p1.before(myEle2)
        let myEle3 = document.createElement("h4")
        myEle3.innerHTML = "这是h4的无敌爆爆龙"
        p1.after(myEle3)

        let span1 = document.getElementById("span1")
        span1.remove()

        let list = document.getElementsByTagName("ul")
        console.log(list)

        console.log(list[0].firstElementChild.nextElementSibling)
        console.log(list[0].children[1])
        console.log(p1.parentElement)

        p1.parentElement.removeChild(p1)

        list[0].removeChild(list[0].firstElementChild)
    </script>
</body>

</html>